<script setup>
import BanksAPI from '@/api/client/bank'
import { useI18n } from "vue-i18n";

const { t } = useI18n();
let formData = reactive({
  id:"",
  status:null,
  type:null,
});

const emits = defineEmits(["refreshTable"]);

// 初始化数据
const ruleFormRef = ref();
const btnLoading = ref(false);
const modalShow = ref(false);
const isEdit = ref(false);

const initModal = ({ row, type }) => {
  modalShow.value = true;
  if (type) {
    for (let key in formData) {
      formData[key] = row[key];
    }
    isEdit.value = true;
  } else {
    isEdit.value = false;
  }
};

// 清空表单对象
const formDataBackUp = Object.assign({}, formData);

// 重置校验与数据
const resetFormKey = () => {
  ruleFormRef.value?.resetFields();
  Object.assign(formData, formDataBackUp);
};

// 校验规则
const rules = ref({
    status: [{ required: true, message: t("label.23"), trigger: "change" }],
    type: [{ required: true, message: t("label.18"), trigger: "change" }],
  },)

// 取消按钮事件
const cancelBtn = () => {
  //清空列表
  resetFormKey()
  //关闭弹窗
  modalShow.value = false;
  btnLoading.value = false;
};

/* 保存报溢 */
const handleSave = async () => {
  // 校验表单信息
  let isVerify = false;
  ruleFormRef.value && (await ruleFormRef.value.validate((valid) => (isVerify = valid)));
  if (!isVerify) {
    ElMessage.warning(t('hint.134'));
    return;
  }
  const id = formData.id;
  console.log('formData===>',formData)

  if (id) {
    // 编辑
    editFormData(formData);
  } else {
    // 新增
    // addFormData(formData);
  }
};


/**
 * 新增事件
 */
 const addFormData = (object) => {
  btnLoading.value = true;
  BanksAPI.add(object)
    .then((res) => {
      ElMessage.success(t("hint.operationSuccess"));
      modalShow.value = false;
      emits("refreshTable");
    })
    .finally(() => {
      btnLoading.value = false;
    });
};

/**
 * 编辑事件
 */
const editFormData = (object) => {
  btnLoading.value = true;
  BanksAPI.put(object)
    .then((res) => {
      ElMessage.success(t("hint.operationSuccess"));
      modalShow.value = false;
      emits("refreshTable");
    })
    .finally(() => {
      btnLoading.value = false;
    });
};


onMounted(() => {
 
})

defineExpose({ initModal });
</script>

<template>
  <el-dialog v-model="modalShow" width="640" align-center :title="isEdit?t('title.37'):t('title.38')" @close="cancelBtn">
    <el-form ref="ruleFormRef" :rules="rules" @submit.enter.prevent label-width="auto" :model="formData" class="form-container">
      <el-form-item :label="t('label.18')" prop="type">
        <el-select v-model="formData.type" :placeholder="t('hint.pleaseSelect')" clearable>
          <el-option :label="t('status.52')" value="owner" />
          <el-option :label="t('status.53')" value="historical" />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('label.23')" prop="status">
        <el-radio-group v-model="formData.status" :placeholder="t('hint.pleaseSelect')" clearable>
          <el-radio :label="t('status.51')" value="inactive" />
          <el-radio :label="t('status.50')" value="active" />
        </el-radio-group>
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button @click="cancelBtn">{{ t('btn.8') }}</el-button>
      <el-button type="primary" @click="handleSave" :loading="btnLoading">{{ t('btn.1') }}</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.form-item,
.int {
  width: 100%;
}
.btn {
  margin-right: 14px;
}
</style>
